<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    <!-- Alt + C -->
    <input @keyup.alt.67="clear">

    <!-- Ctrl + Click -->
    <div @click.ctrl="doSomething">Do something</div>

    <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
    <button @click.ctrl="onClick">即使 Alt 或 Shift 被一同按下时也会触发 </button>

    <!-- 有且只有 Ctrl 被按下的时候才触发 -->
    <button @click.ctrl.exact="onCtrlClick">有且只有 Ctrl 被按下的时候才触发</button>

    <!-- 没有任何系统修饰符被按下的时候才触发 -->
    <button @click.exact="onClick">没有任何系统修饰符被按下的时候才触发</button>
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        methods:{
            clear(){
                console.log("Alt + C ")
            },
            doSomething(){
                console.log("Ctrl + Click")
            },
            onClick(){
                console.log("即使 Alt 或 Shift 被一同按下时也会触发或者是没有任何系统修饰符被按下的时候才触发")
            },
            onCtrlClick(){
                console.log("有且只有 Ctrl 被按下的时候才触发")
            }
        }
    });
</script>
</html>
